<!-- subpkg_consult/room/components/rate-info.vue -->
<script lang="ts" setup>
import { evaluateDoctorApi } from "@/apis/consult"
import type { EvaluateDoc, EvaluateDocParams } from "@/types/room"
import { computed, ref } from "vue"

// 设置样式不隔离
defineOptions({
  options: {
    styleIsolation: "shared",
  },
})
// 组件传值 父传子
const props = defineProps<{
  type: number
  docId: string
  orderId: string
  evaluateDoc?: EvaluateDoc
}>()

// 统计字数
const wordCount = computed(() => {
  return formData.value.content.length || 0
})

// 是否允许提交
const buttonEnable = computed(() => {
  return formData.value.score || 0
})

// 是否匿名评价
const onAnonymousClick = () => {
  return (formData.value.anonymousFlag = Math.abs(
    formData.value.anonymousFlag - 1
  ))
}

// 评价状态
const Evaluated = ref(props.type === 24)

// 表单数据
const formData = ref({
  score: 0,
  content: "",
  anonymousFlag: 0,
})
// 提交表单
const onSubmit = async () => {
  formData.value.content = formData.value.content.trim()
  if (!formData.value.content) {
    return uni.showToast({
      title: "评价不能为空！",
      icon: "error",
    })
  }
  // 评价 返回评价id对象
  const res = await evaluateDoctorApi({
    docId: props.docId,
    orderId: props.orderId,
    ...formData.value,
  })
  uni.showToast({ title: "感谢您的评价！", icon: "success" })
  // 评价过
  Evaluated.value = true
}

if (Evaluated) {
  formData.value.score = props.evaluateDoc?.score || 0
  formData.value.content = props.evaluateDoc?.content || ""
}
</script>
<template>
  <!-- 医生评价 -->
  <view class="doctor-rating">
    <view class="title">医生服务评价</view>
    <view class="subtitle">本次在线问诊服务您还满意吗？</view>
    <view class="rating">
      <uni-rate
        :size="28"
        margin="12"
        v-model="formData.score"
        :readonly="Evaluated"
      />
    </view>
    <view class="text">
      <uni-easyinput
        :disabled="Evaluated"
        v-model="formData.content"
        type="textarea"
        :maxlength="150"
        :input-border="false"
        :styles="{ backgroundColor: '#f6f6f6' }"
        placeholder-style="font-size: 28rpx; color: #979797"
        placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"
      />
      <text class="word-count">{{ wordCount }}/150</text>
    </view>
    <view class="anonymous">
      <view v-if="!Evaluated" @click="onAnonymousClick">
        <uni-icons
          v-if="formData.anonymousFlag"
          size="16"
          color="#16C2A3"
          type="checkbox-filled"
        />
        <uni-icons v-else size="16" color="#d1d1d1" type="circle" />
        <text class="label">匿名评价</text>
      </view>
    </view>
    <button
      @click="onSubmit"
      v-if="!Evaluated"
      :disabled="!buttonEnable"
      class="uni-button"
    >
      提交
    </button>
  </view>
</template>

<style lang="scss">
.doctor-rating {
  padding: 30rpx 30rpx 40rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 60rpx;

  .title {
    text-align: center;
    font-size: 30rpx;
    color: #121826;
  }

  .subtitle {
    text-align: center;
    font-size: 24rpx;
    color: #6f6f6f;
    margin: 10rpx 0 20rpx;
  }

  .rating {
    display: flex;
    justify-content: center;
  }

  .text {
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background-color: #f6f6f6;
    border-radius: 20rpx;
    position: relative;
  }

  :deep(.uni-easyinput__content-textarea) {
    font-size: 28rpx;
  }

  .word-count {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    line-height: 1;
    font-size: 24rpx;
    color: #6f6f6f;
  }

  .anonymous {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;
    color: #6f6f6f;
    font-size: 24rpx;

    .label {
      margin-left: 6rpx;
    }
  }

  .uni-button[disabled] {
    color: #a6dbd5;
    background-color: #eaf8f6;
  }
}
</style>
